<template>
	<view class="container">
		<uni-forms label-width="200rpx" ref="baseFormData" :model="baseFormData" :rules="rules" class="yy">
			<view class="xx">
				<uni-forms-item label="优惠券名称" :required="false" name="name">
					<uni-easyinput :inputBorder="false" v-model="baseFormData.name" primaryColor="#E8E8E8" />
				</uni-forms-item>
			</view>
			<view class="xx">
				<uni-forms-item label="优惠券类型" :required="false" name="type">
					<uni-data-checkbox v-model="baseFormData.type" :localdata="types" @change="selectone"
						style="padding-top: 10rpx;"></uni-data-checkbox>
				</uni-forms-item>
			</view>
			<view class="xx">
				<view class="fulltype">
					<uni-forms-item label="满" label-width="20px" v-if="baseFormData.type==0" name="condition"
						icon="right">
						<uni-easyinput v-model="baseFormData.triggerMoney" style="border-bottom:1rpx solid #000 ;"
							:clearable="true" :inputBorder="false" primaryColor="#E8E8E8"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="元减" label-width="40px" v-if="baseFormData.type==0" name="preferential">
						<uni-easyinput v-model="baseFormData.preferentialMoney" style="border-bottom:1rpx solid #000 ;"
							:clearable="true" :inputBorder="false" primaryColor="#E8E8E8"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="元" v-if="baseFormData.type==0" label-width="20px" />
				</view>
				<view class="discountType">
					<uni-forms-item label="打" label-width="20px" style="display: flex;flex-direction: row;"
						v-if="baseFormData.type==1" name="discount">
						<uni-easyinput v-model="baseFormData.discount" style="border-bottom:1rpx solid #000 ;"
							:clearable="true" :inputBorder="false" primaryColor="#E8E8E8"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="折" label-width="20px" v-if="baseFormData.type==1" />
				</view>
			</view>
			<view class="xx">
				<uni-forms-item label="发放开始时间" name="begin">
					<uni-datetime-picker type="data" v-model="baseFormData.start" />
				</uni-forms-item>
			</view>
			<view class="xx">
				<uni-forms-item label="发放结束时间" name="end">
					<uni-datetime-picker type="data" v-model="baseFormData.end" />
				</uni-forms-item>
			</view>
			<view class="xx">
				<uni-forms-item label="投放数量" :required="false" name="number">
					<uni-easyinput v-model="baseFormData.num" :inputBorder="false" primaryColor="#E8E8E8" />
				</uni-forms-item>
			</view>
			<view class="xx">
				<uni-forms-item label="每人限领" :required="false" name="limit">
					<uni-easyinput v-model="baseFormData.size" :inputBorder="false" primaryColor="#E8E8E8" />
				</uni-forms-item>
			</view>
		</uni-forms>
		<button type="primary" class="button" @click="submit('baseFormData')">确定投放</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					mid: '',
					name: '', //优惠券名称
					type: 0, //优惠券类型
					triggerMoney: null, //满减的条件
					preferentialMoney: '', //满减的优惠额度
					discount: '', //折扣额度
					num: '', //投放数量
					size: '', //每人限领
					start: '', //开始发放时间
					end: '', //发放结束时间
				},
				newbaseFormData: {
					mid: '',
					name: '', //优惠券名称
					type: 0, //优惠券类型
					triggerMoney: null, //满减的条件
					preferentialMoney: '', //满减的优惠额度
					discount: '', //折扣额度
					num: '', //投放数量
					size: '', //每人限领
					start: '', //开始发放时间
					end: '', //发放结束时间
				},
				//使用有效期
				changeLog(event) {
					console.log('选择了新的日期时间范围:', event.detail.value);
				},
				// 单选数据源
				types: [{
					text: '满减券',
					value: 0
				}, {
					text: '打折券',
					value: 1
				}],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '类型不能为空'
						}]
					},
					triggerMoney: {
						rules: [{
							required: true,
							errorMessage: '满减条件不能为空'
						}]
					}, //满减的条件
					preferentialMoney: {
						rules: [{
							required: true,
							errorMessage: '满减优惠不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								console.log(data)
								if (value > data) {
									// 通过返回 resolve
									callback('优惠额不能大于满减金额')
								}
							}
						}]
					}, //满减的优惠额度
					discount: {
						rules: [{
							required: true,
							errorMessage: '折扣不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								console.log(data)
								if (value > 10) {
									// 通过返回 resolve
									callback('折扣不能大于10')
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									return true

								}
							}
						}]
					}, //折扣额度
					num: {
						rules: [{
							required: true,
							errorMessage: '投放数量不能为空'
						}]
					}, //投放数量
					size: {
						rules: [{
							required: true,
							errorMessage: '每人限领数量不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								console.log(data)
								if (value > data.number) {
									// 通过返回 resolve
									callback('每人限领不能大于投放数量')
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									return true

								}
							}

						}]
					}, //每人限领
					start: {
						rules: [{
							required: true,
							errorMessage: '发放时间不能为空'
						}]
					}, //开始发放时间
					end: {
						rules: [{
							required: true,
							errorMessage: '发放结束时间不能为空'
						}]
					}, //发放结束时间
				},
				token: getApp().globalData.authorization,
			}
		},
		computed: {},
		onLoad() {},
		methods: {
			onClickItem(e) {
				this.current = e.currentIndex
			},
			add() {
				this.dynamicLists.push({
					label: '域名',
					rules: [{
						'required': true,
						errorMessage: '域名项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			insertCoupon(mid){
				this.baseFormData.mid = mid
				if(this.baseFormData.discount != ''){
					this.baseFormData.discount = this.baseFormData.discount/10
				}
				if(this.baseFormData.type == 0){
					this.baseFormData.type = '满减券'
				}else {
					this.baseFormData.type = '折扣券'
				}
				uni.request({
					url:'http://localhost:8088/business/coupon',
					method:'POST',
					header:{
						authorization:this.token
					},
					data:this.baseFormData,
					success:(resp)=> {
					}
				})
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.insertCoupon(2)
					this.baseFormData = this.newbaseFormData
					uni.showToast({
						title: `校验通过`
					})
					setTimeout(function() {
						uni.redirectTo({
							url: "/pages/couponManagement/couponManagement"
						})
					}, 1000)
				}).catch(err => {
				})
			},
			// submit(ref) {  
			//     this.$refs[ref].validate().then(res => {  
			//         console.log('success', res);  
			//         // 将baseFormData对象转换为JSON字符串  
			//         const formDataJSON = JSON.stringify(this.baseFormData);  
			//         // 跳转到couponManagement页面，并通过query传递数据  
			//         uni.navigateTo({  
			//             url: `/pages/couponManagement/couponManagement?formData=${encodeURIComponent(formDataJSON)}`  
			//         });  
			//     }).catch(err => {  
			//         console.log('err', err);  
			//     });  
			// },
			selectone() {
				if (this.baseFormData.type == 1) {
					this.baseFormData.triggerMoney = null
					this.baseFormData.preferentialMoney = ''
				} else {
					this.baseFormData.discount = ''
				}

			}

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.container {
		padding: 0 10rpx 10rpx 10rpx;
	}

	.yy {
		align-items: center;
		/* padding: 15rpx; */
		margin: 0 30rpx;
	}

	.xx {
		border-bottom: 1rpx solid #efefef;
		height: 100rpx;
		padding-top: 28rpx;
	}

	.fulltype {
		display: flex;
		align-items: center;
		width: 500rpx;
		margin-left: 160rpx;
	}

	.discountType {
		display: flex;
		align-items: center;
		width: 200rpx;
		margin-left: 350rpx;
	}

	.button {
		color: #1D6FFF;
		border: 1rpx solid #1D6FFF;
		background-color: #fff;
		width: 640rpx;
		font-size: 30rpx;
		margin-top: 120rpx;
	}
</style>